<template>
  <div>
    <div class="table-container">
      <el-table
        :data="solutions"
        @selection-change="onSelect">
        <el-table-column label-class-name="text-center" class-name="text-center" type="selection"></el-table-column>
        <!--方案名称-->
        <el-table-column prop="name" :label="$t('pages.solution.col_name')"></el-table-column>
        <!--方案特性-->
        <el-table-column prop="features" :label="$t('pages.solution.col_features')"></el-table-column>
        <!--是否推荐到首页-->
        <el-table-column label-class-name="text-center" class-name="text-center"  prop="recommand" :label="$t('pages.solution.col_recommand')"></el-table-column>
        <!--推荐排序-->
        <el-table-column label-class-name="text-center" class-name="text-center"  prop="sort" :label="$t('pages.solution.col_sort')"></el-table-column>
        <!--操作人-->
        <el-table-column prop="actioner" :label="$t('pages.solution.col_actioner')"></el-table-column>
        <!--发布状态-->
        <el-table-column label-class-name="text-center" class-name="text-center" prop="status" :label="$t('pages.solution.col_status')"></el-table-column>
        <!--操作-->
        <el-table-column label-class-name="text-center" class-name="action text-center" :label="$t('pages.solution.col_action')">
          <template slot-scope="scope">
            <a href="#" class="text-warning" @click.prevent="editDetail(scope.row)">编辑</a>
            <a href="#" class="text-info" @click.prevent="viewDetail(scope.row)">详情</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="onCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalPage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  const solutions = [
    {id: 0, name: '方案1', features: 'zzzz', recommand: 'Y', sort: 0, status: 3, actioner: 'xxx'},
    {id: 1, name: '方案2', features: 'zzzz', recommand: 'N', sort: 2, status: 1, actioner: 'xxx'},
    {id: 2, name: '方案3', features: 'zzzz', recommand: 'N', sort: 3, status: 2, actioner: 'xxx'},
    {id: 3, name: '方案4', features: 'zzzz', recommand: 'Y', sort: 4, status: 1, actioner: 'xxx'},
    {id: 4, name: '方案5', features: 'zzzz', recommand: 'Y', sort: 5, status: 1, actioner: 'xxx'},
    {id: 5, name: '方案6', features: 'zzzz', recommand: 'N', sort: 6, status: 3, actioner: 'xxx'},
    {id: 6, name: '方案7', features: 'zzzz', recommand: 'Y', sort: 7, status: 1, actioner: 'xxx'},
  ]
  export default {
    props: [],
    name: 'SolutionTable',
    props: {

      // 方案的类型(总部还是区域)
      type: {
        type: String,
        default: '1'
      },
      // 方案状态(待维护/已发布/全部)
      status: {
        type: Number,
        default: 1
      }
    },
    data () {
      return {
        solutions,
        currentPage: 1,
        pageSize: 10,
        totalPage: 10
      }
    },
    methods: {
      // 查看
      viewDetail () {},

      // 编辑
      editDetail (solution) {
        this.$emit('edit', solution)
      },
      // 当前页改变
      onCurrentChange () {},

      // select 选择
      onSelect (value) {
        console.log(value)
        this.$emit('onSelectSolutions', value)
      }
    }
  }
</script>

<style lang="scss" scoped>


</style>
